<template>
	<view>
		<image src="../../static/img/myBc.png" class="mybc"></image>
		<view class="user">
			<image :src="pubUrl+user.userImg" class="userIcon"></image>
			<text class="userName">{{user.nickName}}</text>
		</view>
		<text class="lable">最近播放</text>
		<text class="lableMore" @click="addPlay(1)">播放</text>
		<view class="recommend">
			<view class="list">
				<view class="item" v-for="(item, index) in playrecordList" :key="index">
					<image :src="pubUrl + item.musicImg" class="cover"></image>
					<view class="title">{{ item.musicName }}</view>
				</view>
			</view>
		</view>
		<text class="lable">我喜欢的歌曲</text>
		<text class="lableMore" @click="addPlay(2)">播放</text>
		<view class="recommend">
			<view class="list">
				<view class="item" v-for="(item, index) in likeList" :key="index">
					<image :src="pubUrl + item.musicImg" class="cover"></image>
					<view class="title">{{ item.musicName }}</view>
				</view>
			</view>
		</view>

		<view class="eventList">
			<view class="eventItem" @click="outLogin()">
				退出
				<text class="righr">></text>
			</view>
		</view>
	</view>
</template>

<script>
import { playrecordGetall, getbymylike } from '@/api/song';
import { pubUrl } from '@/api/http.js';
import store from '@/store/index.js';
import { initAudio } from '@/common/Audio';
import { getloginuser } from '@/api/user';
export default {
	data() {
		return {
			playrecordList: [],
			pubUrl: pubUrl,
			likeList: [],
			user: ''
		};
	},
	methods: {
		//获取喜欢的歌曲列表
		getbymylikeList() {
			getbymylike().then(res => {
				this.likeList = res.data;
			});
		},
		//获取最近播放记录
		playrecordGetallApi() {
			playrecordGetall().then(res => {
				this.playrecordList = res.data;
			});
		},
		//添加最近播放到播放列表
		addPlay(type) {
			let list;
			if (type == 1) {
				list = this.playrecordList;
			}
			if (type == 2) {
				list = this.likeList;
			}
			store.commit('setSongSheetList', list);
			store.commit('setPlayIndex', 0);
			initAudio();
			console.log(store.state.songSheet);
			uni.navigateTo({
				url: '/pages/main/main'
			});
		},
		//退出登录
		outLogin() {
			uni.setStorageSync('token', '');
			uni.navigateTo({
				url: '../login/login'
			});
			location.reload();
		},
		//获取用户信息
		getloginuserApi() {
			getloginuser().then(res => {
				this.user=res.data
				console.log(this.pubUrl,this.user)
			});
		}
	},
	onLoad() {
		this.playrecordGetallApi();
		this.getbymylikeList();
		this.getloginuserApi();
	},
	components: {}
};
</script>

<style lang="less" scoped>
.eventList {
	color: #000;
	overflow-x: hidden;
	.eventItem {
		border-bottom: 1px solid #dbdbdb;
		padding-bottom: 5px;
		margin: 10px;
		font-size: 13px;
		position: relative;
		.righr {
			position: absolute;
			right: 5px;
		}
	}
}
.lable {
	font-weight: 600;
	font-size: 12px;
	margin: 5px;
}
.lableMore {
	.lable();
	position: absolute;
	right: 10px;
	color: #8a8a8a;
	font-weight: 500;
}
.recommend {
	color: #8d8d8d;
	margin-left: 5px;
	margin-top: -5px;
	.elaborate {
		position: relative;
		color: #000;

		.more {
			position: absolute;
			right: 10px;
			top: 0;
			border-radius: 15px;
			border: solid #000 1px;
			font-size: 10px;
			padding: 3px;
		}
	}
	.list {
		display: flex;
		height: 140px;
		width: 100%;
		overflow-x: scroll;
		margin-top: 10px;
		.item {
			height: 120px;
			width: 100px;
			border-radius: 10px;
			flex-shrink: 0;
			margin-right: 10px;
			.cover {
				width: 100px;
				height: 100px;
				border-radius: 5px;
			}
			.title {
				font-size: 10px;
				color: #000;
			}
		}
	}
}
.mybc {
	position: relative;
	width: 100%;
	height: 150px;
	text-align: center;
	line-height: 50px;
}
.user {
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	//align-items: center;
	justify-content: center;
	color: #1b73e5;
	font-size: 15px;
	font-weight: 600;
	width: 100%;
	height: 150px;
	flex-wrap: wrap;
	.userIcon {
		border-radius: 5px;
		width: 60px;
		height: 60px;
		margin-top: 10%;
	}
	.userName {
		width: 100%;
		text-align: center;
	}
}
</style>
